<html>
<head>
<script type="text/javascript">
var smile=[];
</script>
<script type="text/javascript" src="smiles.js"></script>
<script type="text/javascript">
var sm=smile;
var twidth=0;
var maxh=0;
var img0=20;
var sliding=false;
var sliding_down=true;
var closing=false;
var loaded=false;
function movebox(start,end,speed)
      {
      loaded=false;
      start += speed;
      if(speed < 0)
            {
            if(start - speed * (speed  - 1) / 2 < end) {speed++;}
            else if(start - (speed - 1) * (speed - 2) / 2 >= end) {speed--;}
            sliding_down=true;
            }
       else
            {
            if(start + speed * (speed + 1) / 2 > end) {speed--;}
            else if(start + (speed + 1) * (speed + 2) / 2 <= end) {speed++;}
            sliding_down=false;
            }
      sm_container.style.width=start+"px";
      if(start!=end && speed!=0)
            {
            sliding=setTimeout("movebox("+start+","+end+","+speed+");",50);
            }
      else
            {
            sliding_down=false;
            clearTimeout(sliding);
            sliding=false;
            closing=false;
            loaded=true;
            }
      }
function viewS(b,i)
      {
            if(b)
                  {
                  sm_container.style.display="none";
                  slink.value="[img]"+i.src+"[/img]";
                  slink.style.display="";
                  slink.focus();
                  slink.select();
                  }
//onblur event
            else
                  {
                  sm_container.style.display="";
                  slink.style.display="none";
                  }
      }
function slide(open,tWidth1)
      {
      if(loaded)
            {
            if(open)
                  {
                  sm_container.focus();
                  if(!sliding) {movebox(smiles[0].width,tWidth1,1);}
                  }
            else
                  {
                  var temp=sm_container.style.width;
                  temp=temp.substring(0,temp.indexOf("p"));
                  movebox(temp,smiles[0].width,-1);
                  }
           }
      }
function tLength()
    {
    for(i=0;i<smiles.length;i++)
          {
          twidth+=smiles[i].width+2;
          if(smiles[i].height>maxh)
                {
                maxh=smiles[i];
                }
          }
    img0=smiles[0].width;
    }
function mainLogic()
    {
    tLength();
    sm_container.style.width=img0;
    sm_container.style.height=maxh;
    viewS(0);
    loaded=true;
    twidth+=(smiles.length)*3+smiles.length;
    }
var ccc=0;
function checkLoad()
    {
    ccc++;
    var wait=0;
    if(typeof smiles == "undefined")
          {
          test1.innerHTML="Error";
          return;
          }
    for(i=0;i<smiles.length;i++)
          {
          if(!smiles[i].complete)
                {
                wait=1;
                }
          }
    if(!wait)
          {
          test1.style.display="none";
          mainLogic();
          }
    else
          {
          if(ccc<20)
                {
                setTimeout("checkLoad()",500);
                }
          else
                {
                test1.innerHTML="Error";
                } 
          }
    }
function imgError(obj)
    {
    obj.onclick="";
    obj.src="error.jpg";
    }
function loadImages()
    {
    var cont="<span style='display:inline-table;cursor:arrow;'>";
    for(var i=0;i<sm.length;i++) 
          {
          if(!i)
                {
                cont+="<img id='smiles' src='";
                cont+=sm[i];
                cont+="' onclick='viewS(1,this)' class='iSmile'";
                cont+=" onmouseover='openBar(1)' onmouseout='closeBar();' onerror='imgError(this)'>";
                }
          else
                {
                cont+="<span class='iSep'>|<\/span>";
                cont+="<img id='smiles' src='";
                cont+=sm[i];
                cont+="' onclick='viewS(1,this)' class='iSmile'";
                cont+=" onmouseover='openBar(0)' onmouseout='closeBar();' onerror='imgError(this)'>";
                }
          }
    cont+="&nbsp;&nbsp;&nbsp;<\/span>";
    c1.innerHTML=cont;
    sm_container.style.display="none";
    test1.innerHTML="Loading";
    checkLoad();
    //setTimeout("mainLogic()",4000);
    }
function closeBar()
      {
      closing=setTimeout("slide(0)",3000);
      }
function openBar(i)
      {
      if(i && !closing)
            {
            slide(1,twidth);
            }
      window.clearTimeout(closing);
      closing=false;
      }
</script>
<style type="text/css">
.iSmile {vertical-align:top;}
.iSep   {color:black;vertical-align:top;}
#sm_container
      {
      width:        70px;
      height:       23px;
      overflow:     hidden;
      }
</style>
</head>
<body onblur="viewS(0);closeBar();" onload="loadImages();">
<div id="sm_container">
<div id="c1">C1</div>
</div>
<input type="text" value="" id="slink" style="display:none;">
<div id="test1"></div>
</body>
</html>